<template>
  <el-card>
      <div slot="header" class="clearfix">
      <span>
          返校申请
      </span>
  </div>
  
  <div style="margin-left:860px;margin-bottom: 10px;">
      
    
          <el-input  v-model="searchValue"  placeholder="输入关键字搜索" style="width: 260px;" />
 
 
          <el-button @click="search" style="width:80px">搜索</el-button>
 
      </div>
  
  <div>
      <el-table :data="fillterAndPageData" style="width: 100%">
          <el-table-column prop="xuehao" label="学号" width="100"></el-table-column>
          <el-table-column prop="name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
          <el-table-column prop="college" label="专业" width="100"></el-table-column>
          <el-table-column prop="className" label="班级" width="100"></el-table-column>
        
          
          
          <el-table-column prop="way" label="返校方式" width="150"></el-table-column>
          <el-table-column label="健康码" width="160">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px"
                           :src="scope.row.jiankangma"
                            :fit="fit"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="行程码" width="160">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px"
                        :src="scope.row.xingchengka"
                            :fit="fit"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="核算证明" width="160">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px"
                        :src="scope.row.hesuanzhengming"
                            :fit="fit"></el-image>
                    </template>
                </el-table-column>
                
                <el-table-column prop="status" label="状态" width="100"
          >
    <template slot-scope="scope">
      <el-tag
        :type="scope.row.status === '通过' ?  'success':'danger' "
        disable-transitions>{{scope.row.status}}</el-tag>
       
    </template>
      </el-table-column>
          <el-table-column label="操作">
                  <template slot-scope="scope">
                      <el-button size="mini" type="primary" @click="open(scope.row.name)">审核</el-button>
                     
                      
                  </template>
                  
              </el-table-column>
      </el-table>
      
  <el-pagination
   
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageNumber"
    :page-sizes="[6,8,10]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next"
    :total="total">
  </el-pagination>

  </div>
  </el-card>
</template>

<script>
  export default{
      data(){
          return {
          fillterAndPageData: [],
          pageSize:'',
          pageNumber:'',
          total:'',
          searchValue:'',
          status:'通过',
          mingzi:'',
      value:''
     
          
      }
  },
  created(){
       this.query() 
      },
  methods: {
      handleCurrentChange(pageNumber) {
    
    this.pageNumber=pageNumber;
    console.log(pageNumber);
    this.query()
   
    
  },
  handleSizeChange(pageSize) {
   
    this.pageSize=pageSize;
    console.log(pageSize);
    this.query()
    
  },
      query(){
          fetch("http://1.15.134.100:9999/fanxiao/query?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize+"&searchValue="+this.searchValue,{
              method:"GET",
              headers:{
                  'token': localStorage.getItem('token'),
              },
          }
          )
          .then(res => res.json()).then(res =>{
              this.fillterAndPageData=res.data.list
            this.total=  res.data.total
           

          })
      },
       
        search(){
          this.searchValue=this.searchValue;
          console.log(this.searchValue)
          this.query()
        },
        open(name) {
           this.mingzi=name;
           
        this.$confirm('是否同意?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => { 
          
          this.$message({
            type: 'success',
            message: '已同意!'
          });
          this.queding()
          this.$router.go(0);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      queding(){
        fetch("http://1.15.134.100:9999/user/zhuangtai",{
            method:"POST",
            headers: {
                    'Content-type': 'application/json',
                    'token': localStorage.getItem('token'),
                 
                  
                    
                },
            body:JSON.stringify({
                  name:this.mingzi,
                  status:this.status
            })

            
        }).then(response=>response.json())
        .then(data=>{
             console.log(data)
        });
      },

       
   
      
  }
  }
</script>
<style>
.clearfix {
  display: flex;
 

}


.el-pagination{
  margin-left: 850px;
}



</style>